<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例展示</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/select.css">
    <link rel="stylesheet" href="/css/example.css">
    <link rel="stylesheet" href="/css/swiper.min.css">
    <script src="/js/swiper.min.js"></script>
    <script>
        function selectCar() {
            var visibility = document.getElementById('select-fixed-car').style.visibility
            if (visibility === 'hidden') {
                document.getElementById('select-fixed-car').style.visibility = 'inherit'
            } else {
                document.getElementById('select-fixed-car').style.visibility = 'hidden'
            }
            document.getElementById('select-fixed-type').style.visibility = 'hidden'
        }

        function selectType() {
            var visibility = document.getElementById('select-fixed-type').style.visibility
            if (visibility === 'hidden') {
                document.getElementById('select-fixed-type').style.visibility = 'inherit'
            } else {
                document.getElementById('select-fixed-type').style.visibility = 'hidden'
            }
            document.getElementById('select-fixed-car').style.visibility = 'hidden'
        }

        function carClick(name) {
            document.getElementById('select-car-type').innerHTML = name
            document.getElementById('select-fixed-car').style.visibility = 'hidden'
            document.getElementById('select-fixed-type').style.visibility = 'inherit'
        }

        function typeClick() {
            document.getElementById('select-fixed-type').style.visibility = 'hidden'
        }
    </script>
</head>
<body>
    <header class="header">
        <img src="/assets/header.png" alt="" width="100%" height="300">
        <div class="logo"><img src="/assets/logo.png" width="150"></div>
        <div class="link">
            <div href="/baojia.html" class="link_cell baojia">
                <img src="/assets/link_3.png" height="24">
                <p>车型报价</p>
                <div class="link_cell_fixed">
                    <div class="border-up"><span></span></div>
                    <div style="overflow: hidden;height: 100%;">
                        <a href="/baojia.html">M8系列</a>
                        <a href="/baojia.html">M6系列</a>
                    </div>
                </div>
            </div>
            <a href="/zhibao.html" class="link_cell">
                <img src="/assets/link_4.png" height="24">
                <p>质保查询</p>
            </a>
            <a href="/example.html" class="link_cell">
                <img src="/assets/link_2.png" width="26">
                <p>案例展示</p>
            </a>
            <a href="/shigong.html" class="link_cell">
                <img src="/assets/link_1.png" height="24">
                <p>施工指导</p>
            </a>
        </div>
    </header>
    <div class="example">
        <div class="example_content">
            <div class="select">
                <div class="select_active_name">
                    阿斯顿马丁
                </div>
                <div class="select_cell" onclick="selectCar()" style="float: right;">
                    <img src="/assets/car.png" width="24" style="margin-top: 16px;">
                    <span>选择品牌</span>
                    <img src="/assets/car_select.png" class="select_cell_select">
                </div>
                <!-- 选择品牌 -->
                <div class="select_fixed type" id="select-fixed-car" style="visibility: hidden;">
                    <h4 class="select_fixed_title">品牌</h4>
                    <div class="select_fixed_wrap">
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="example_list">
                <a href="/exampledetail.html" class="example_list_cell">
                    <div class="example_list_cell_img"><img src="/assets/example_car.png" width="100%" height="200"></div>
                    <p class="example_list_cell_name">奔驰G级越野车</p>
                </a>
                <a href="/exampledetail.html" class="example_list_cell">
                    <div class="example_list_cell_img"><img src="/assets/example_car.png" width="100%" height="200"></div>
                    <p class="example_list_cell_name">奔驰G级越野车</p>
                </a>
                <a href="/exampledetail.html" class="example_list_cell">
                    <div class="example_list_cell_img"><img src="/assets/example_car.png" width="100%" height="200"></div>
                    <p class="example_list_cell_name">奔驰G级越野车</p>
                </a>
                <a href="/exampledetail.html" class="example_list_cell">
                    <div class="example_list_cell_img"><img src="/assets/example_car.png" width="100%" height="200"></div>
                    <p class="example_list_cell_name">奔驰G级越野车</p>
                </a>
                <a href="/exampledetail.html" class="example_list_cell">
                    <div class="example_list_cell_img"><img src="/assets/example_car.png" width="100%" height="200"></div>
                    <p class="example_list_cell_name">奔驰G级越野车</p>
                </a>
                <a href="/exampledetail.html" class="example_list_cell">
                    <div class="example_list_cell_img"><img src="/assets/example_car.png" width="100%" height="200"></div>
                    <p class="example_list_cell_name">奔驰G级越野车</p>
                </a>
                <a href="/exampledetail.html" class="example_list_cell">
                    <div class="example_list_cell_img"><img src="/assets/example_car.png" width="100%" height="200"></div>
                    <p class="example_list_cell_name">奔驰G级越野车</p>
                </a>
                <a href="/exampledetail.html" class="example_list_cell">
                    <div class="example_list_cell_img"><img src="/assets/example_car.png" width="100%" height="200"></div>
                    <p class="example_list_cell_name">奔驰G级越野车</p>
                </a>
                <a href="/exampledetail.html" class="example_list_cell">
                    <div class="example_list_cell_img"><img src="/assets/example_car.png" width="100%" height="200"></div>
                    <p class="example_list_cell_name">奔驰G级越野车</p>
                </a>
            </div>
            <div class="example_pages">
                <a class="example_page active">1</a>
                <a class="example_page">2</a>
                <a class="example_page">3</a>
                <a class="example_page">4</a>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="footer-content">
            <img src="/assets/footer_logo.png" alt="">
            <div class="footer-phone">
                <p>全国服务热线</p>
                <p>400-600-2900</p>
            </div>
            <div class="footer-info">
                <p>粤ICP备09064614号    备案编号：11010502002098</p>
                <p>COPYRIGHT (©) 2019 中凌薄膜材料科技（上海）有限公司  版权所有</p>
            </div>
            <div class="footer-qrcode">
                <img src="/assets/footer_qrcode.png">
                <p style="text-align: center; margin-top: 5px;">扫一扫,关注公众号</p>
            </div>
        </div>
    </footer>
</body>
</html>